<template>
  <div>
    <el-row>
      <el-col :span="20" :offset="2">
        <el-card style="width: 100%; margin-top: 20px; align:center">
          <el-row>
            <el-col :span="8" :offset="4">
              <div class="block">
                <div><el-image :src="product.pic" style="width:300px; height:300px"></el-image></div>
                <div>库存：{{product.stock}}件</div>
              </div>
              <!-- <span style="margin-left: 55%">剩余库存： {{product.stock}}</span> -->
            </el-col>

            <el-col :span="12" style="margin-top: 15px">
              <div>
                <span style="font-weight: bold; font-size: 25px">商品名：{{product.name}} </span>
                <!-- --- {{product.brandName}} -->
              </div>
              <div style="margin:10px">品牌：<el-tag>{{product.brandName}}</el-tag> 商品分类：<el-tag>{{ product.productCategoryName}}</el-tag> </div>
              <div style="margin:10px">单位：<el-tag>{{ product.unit}}</el-tag>    重量（克）：<el-tag>{{ product.weight}}</el-tag>  </div>
              <div style="margin:10px">赠送积分：<el-tag>{{ product.giftPoint}} </el-tag>   赠送成长值：<el-tag>{{ product.giftGrowth}} </el-tag> </div>
              <div style="height: auto; width: 450px;margin-top:20px;margin-bottom:20px">商品描述： {{product.description}}</div>
              <div>
                <span class="myFont">价格</span>
                <span style="color: #FF0036;
                  font-weight: bolder;
                  font-size: 30px;
                  vertical-align:
                  middle;font-family: Arial">￥{{product.price}}</span>
              </div>
              <div>
                <span class="myFont mySpan" style="font-size: 18px">数量</span>
                <el-input-number style="width: 120px"
                                v-model="cartItem.quantity"
                                controls-position="right"
                                :min="1"
                                :max="product.stock">
                </el-input-number>
                <span style="color: #878787;
                                          margin-left: 1.2em;
                                          font-size: 10px">销量：{{product.sale}}件</span>
              </div>
              <div style="margin-top: 2%">
                <el-button style="margin-right: 0;
                                float: left;
                                overflow: hidden;
                                position: relative;
                                width: 178px;
                                background-color: #ffeded;
                                border: 1px solid #FF0036;
                                color: #FF0036;
                                font-family: 'Microsoft Yahei';" @click="toBuy">立即购买
                </el-button>
                <el-button style="background-color: #ff0036;
                                border: 1px solid #ff0036;
                                width: 178px;
                                color: #fff;" @click="addCar"><b class="el-icon-shopping-cart-2"></b>加入购物车
                </el-button>
              </div>
            </el-col>
          </el-row>
          <el-divider/>

        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import {mapGetters} from 'vuex';
import { getProductDetail } from '@/api/product'
import { addCart } from '@/api/cart'

export default {
  name: "index",
  created() {
    this.id = this.$route.query.id
    this.getProductDetail()
  },
  data() {
    return {
      id: '',
      product: {
        // name: '卫龙大辣棒',
        // sale: 50,
        // price: 12.0,
        // subTitle: '副标题',
        // stock: 50,
        // urls: [
        //   '//gd1.alicdn.com/imgextra/i4/2209845927682/O1CN01fjBSO726cPESZI9cE_!!2209845927682.jpg_400x400.jpg',
        //   '//gd1.alicdn.com/imgextra/i4/2209845927682/O1CN01fjBSO726cPESZI9cE_!!2209845927682.jpg_400x400.jpg',
        //   '//gd1.alicdn.com/imgextra/i4/2209845927682/O1CN01fjBSO726cPESZI9cE_!!2209845927682.jpg_400x400.jpg',
        //   '//gd1.alicdn.com/imgextra/i4/2209845927682/O1CN01fjBSO726cPESZI9cE_!!2209845927682.jpg_400x400.jpg',
        // ],
        // brandName: '品牌',
        // categoryName: '零食',
        // description: '商品描述很好吃的辣条,商品描述很好吃的辣条,商品描述很好吃的辣条' +
        //   ',商品描述很好吃的辣条,商品描述很好吃的辣条,商品描述很好吃的辣条,商品描述很好吃的辣条,' +
        //   '商品描述很好吃的辣条,商品描述很好吃的辣条,商品描述很好吃的辣条,商品描述很好吃的辣条,商品描述很好吃的辣条'
      },
      cartItem: {
        id: '',
        productId: '',
        quantity: 1
      },
      num: 0,
    }
  },
  methods: {
    async getProductDetail() {
      const res = await getProductDetail(this.id)
      console.log("getContent",res)
      
      const { product, brand, couponList } = res.data
      this.product = product
      // this.hots = hotProductList
      // this.products = productList
    },
    toBuy(){
      console.log("toBuy")
      // TODO 下单
    },
    addCar() {
      console.log("addCar",this.product)
      console.log("用户id",this.$store.getters.id)
      this.cartItem.productId = this.product.id
      addCart(this.cartItem).then(() => {
        this.$message({
          type: 'success',
          message: '加入购物车成功'
        })
      })
      // TODO 加购
    }
  }
}
</script>

<style scoped>
  .myFont {
    color: #999;
    font-size: 12px;
    text-align: left;
  }

</style>
